<template>
	<view class="page">
		<view class="main_box" v-for="(item,index) in Table_list" :key="index">
			<span class="sp_1"> {{item.name}}</span>
			<span v-if="item.guanxi=='伴侣'" style="background-color: #ff6699;" class="sp_2">{{item.guanxi}}</span>
			<span v-if="item.guanxi=='朋友'" style="background-color:#1677FF ;" class="sp_2">{{item.guanxi}}</span>
			<span v-if="item.guanxi=='家人'" style="background-color: #00cccc;" class="sp_2">{{item.guanxi}}</span>
			<span class="sp_3">手机号:{{item.number}}</span>
			<span class="sp_4" @click="detail(item.id)">报告详情></span>
		
		</view>
		<uni-popup ref="prop" type="center" style="border-radius: 26rpx;">
			<view class="prop">
		
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Table_list: [{
					id: 1,
					name: '张三',
					number: '1553332222',
					guanxi: '伴侣'
				}, {
					id: 2,
					name: '王二二',
					number: '1553332222',
					guanxi: '朋友'
				}, {
					id: 3,
					name: '李四',
					number: '1553332222',
					guanxi: '家人'
				}]
			}
		},
		methods: {
			detail(id) {
				this.$refs.prop.open('center')
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #EAEAEA;

		.prop {
			width: 615rpx;
			height: 70vh;
			margin: 0 auto;
			border-radius: 26rpx;
			background-color: #ffffff;
			position: relative;
		}

		.main_box {
			width: 686rpx;
			height: 250rpx;
			background-color: #fff;
			margin-left: 32rpx;
			margin-top: 48rpx;
			position: relative;

			.sp_1 {
				position: absolute;
				width: 140rpx;
				height: 48rpx;
				font-size: 35rpx;
				font-weight: bold;
				display: inline-block;
				top: 40rpx;
				left: 32rpx;
			}

			.sp_2 {
				position: absolute;
				width: 78rpx;
				height: 32rpx;
				// background-color: #1677FF;
				color: #fff;
				font-size: 24rpx;
				line-height: 32rpx;
				top: 48rpx;
				left: 155rpx;
				text-align: center;
				border-radius: 20rpx;
			}

			.sp_3 {
				position: absolute;
				width: 298rpx;
				height: 48rpx;
				font-size: 32rpx;
				display: inline-block;
				left: 32rpx;
				bottom: 42rpx;
			}

			.sp_4 {
				position: absolute;
				right: 0rpx;
				bottom: 42rpx;
				width: 180rpx;
				height: 48rpx;
				color: #999999;
				display: inline-block;
				font-size: 28rpx;
				line-height: 48rpx;
			}
		}
	}
</style>